<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ page session="false"%>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Microblogging</title>
<link rel="stylesheet"
	href="resources/css/themes/default/jquery.mobile-1.4.0.min.css">
<link rel="stylesheet" href="resources/_assets/css/jqm-demos.css">
<link rel="stylesheet"
	href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700">
<link rel="stylesheet" href="resources/css/bootstrap.min.css"></link>
<link rel="stylesheet" href="resources/css/bootstrap-fileupload.min.css"></link>
<link rel="stylesheet" href="resources/css/jquery.fancybox.css?v=2.1.5"
	type="text/css" media="screen" />
<link rel="stylesheet" href="resources/css/bootstrap.min.css"></link>
<link rel="stylesheet"
	href="resources/css/ui-lightness/jquery-ui-1.10.3.custom.css">
<link rel="stylesheet" href="resources/css/jquery.rating.css">
<link rel="stylesheet" href="resources/css/jquery.dataTables.css">
<style type="text/css">
#content {
	padding: 0 !important;
}
.ui-panel .ui-panel-inner {
	overflow: auto;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}
.loginTable {
	margin: auto;
	margin-top: 5%;
}
.float-right{
	float: right;
}
p.more {
    display:none;
}
a.readmorebtn {
    cursor:pointer;
}
a.readmorebtn:hover {
    border-bottom:1px black solid;
}
.wrap {
    border-bottom: 1px solid #ccc;
}
.response{
	margin-top:0%;
}
.strech{
	padding:1%;
	border-radius:0.5em;
}
div.pac-container{
	width:30%!important;
}
.extend-div{
	margin-top: -9%;
	margin-left: -9%;
	margin-right: -9%;
}
.button-table{
	margin: 0%;
}
.button-link {
	color:dodgerblue;
    background:none!important;
    border:none; 
    padding:0!important;
    /*border is optional
    border-bottom:1px solid #444; */
}
</style>
<script
	src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA3kOYMhNbartGm75c_O2XioYUTnbiEsu4&sensor=true&libraries=drawing,places"></script>
<script src="resources/js/jquery.js"></script>
<script src="resources/_assets/js/index.js"></script>
<script src="resources/js/jquery.mobile-1.4.0.min.js"></script>
<script src="resources/js/model/HashMap.js?version=1"></script>
<script src="resources/js/model/AppController.js?version=9"></script>
<script src="resources/js/model/Comment.js?version=2"></script>
<script src="resources/js/model/User.js?version=1"></script>
<script src="resources/js/model/Blog.js?version=5"></script>
<script src="resources/js/model/Room.js?version=5"></script>
<script src="resources/js/model/Map.js?version=4"></script>
<script type="text/javascript" src="resources/js/jquery.json-2.3.min.js"></script>
<script type="text/javascript"
	src="/CoupledObjectWebServer/resources/js/sync.js?version=1"></script>
<script type="text/javascript"
	src="resources/js/jquery.mousewheel-3.0.6.pack.js"></script>
<script type="text/javascript"
	src="resources/js/jquery.fancybox.pack.js?v=2.1.5"></script>
<script src="resources/js/bootstrap.min.js"></script>
<script src="resources/js/bootstrap-fileupload.min.js"></script>
<script src="resources/js/jquery.MetaData.js"></script>
<script src="resources/js/jquery.rating.js"></script>
<script type="text/javascript" charset="utf8" 
	src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>
</head>
<body>
	<script>
	$.mobile.ignoreContentEnabled =true
var app=new AppController();
app.init('${session}');
$(document).ready(function(){
	$('input[name=star2]').rating('readOnly',true);
	$('input[name=detail1]').rating('readOnly',true);
	$('input[name=detail2]').rating('readOnly',true);
	$('input[name=detail3]').rating('readOnly',true);
	$('input[name=detail4]').rating('readOnly',true);
	$('input[name=detail5]').rating('readOnly',true);
	$('input[name=detail6]').rating('readOnly',true);
	$('input[name=detail7]').rating('readOnly',true);
	$("#searchGoogle").click(function(){
		$("#searchM").hide();
		$("#searchG").show();
	});
	$("#searchMicroblogging").click(function(){
		$("#searchG").hide();
		$("#searchM").show();
	});
	$("#addFile").click(function(){
		$("#listFiles").append(
		$("<div class='fileupload fileupload-new' data-provides='fileupload' style='text-align:center;'>"+
		"<div class='fileupload-new thumbnail' style='width: 50px; height: 50px;'><img src='resources/images/font50x50.gif' /></div>"+
	  	"<div id='preview' class='fileupload-preview fileupload-exists thumbnail files' style='width: 50px; height: 50px;text-align:center;'></div>"+
	  	"<input type='file' id='files' name='files[]' onload='alert();' style='font-size:0.7em;width:100%;'/>"+
		"</div> "));

	});
	$("#discard").click(function(){
		if(confirm("Are you sure you want to delete this blog?")){
			app.currentRoom.deleteOverlay($("#blogId").val());
			resetField();
			$("#panelD").click();
		}else
			return;
	});
	$("#publish").click(function(){
		if($("#title").val()==''){
			alert("Please add a title.");
			return;
		}		
		var data = new FormData($(".userform")[0]);
		$.ajax({
		    url: 'upload',
		    data: data,
		    cache: false,
		    contentType: false,
		    processData: false,
		    type: 'POST',
		    beforeSend: function(){
		    	$(".show-page-loading-msg").click();
		    },
		    success: function(data){
		    	var files=[];
		      	$.each(data,function(i,file){
		    	   files.push(file);
		       });
		      	if($("#blogId").val()=='circle')
					app.currentRoom.publishBlogCircle(files);
				else if($("#blogId").val()=='rectangle')
					app.currentRoom.publishBlogRectangle(files);
				else if($("#blogId").val()=='polyline')
					app.currentRoom.publishBlogPolyline(files);
				else if($("#blogId").val()=='polygon')
					app.currentRoom.publishBlogPolygon(files);
				else if($("#blogId").val()=='marker')
					app.currentRoom.publishBlog(files);
				$("#panelD").click();
				$(".hide-page-loading-msg").click();
		    },
		    error: function(){
		    	$(".hide-page-loading-msg").click();
		    	alert("It was an error. Please re-publish your blog.");
		    }
		});		
	});
	$("#addComment").click(function(){
		if($("#comment").val()==''){
			alert("Please add a comment.");
			return;
		}
		var time=getTime();
		var id=app.currentRoom.getNewId();
		app.currentRoom.addCommentRoom(id,$('#blogId').val(),$('#comment').val(),$('#userName').val(),time);
		$('#comment').val('');
	});
	
	$("#addCommentResponse").click(function(){
		if($("#commentR").val()==''){
			alert("Please add a comment.");
			return;
		}
		$("#commentResponse").hide();
		$("#commentResponse").appendTo("#comments");		
		var time=getTime();
		var id=app.currentRoom.getNewId();
		var commentIdRef=$("#commentIdRef").val();
		$("#commentIdRef").val("");
		app.currentRoom.addSubCommentRoom(id,$('#blogId').val(),$('#commentR').val(),$('#userName').val(),time,
				commentIdRef,$("#level").val());
		$("#commentR").val("");
	});
	
	$("#comment").click(function(){
		$("#commentResponse").hide();
		$("#commentIdRef").val('');
		$("#level").val('');
	});
	
	$("#likeButton").click(function(){
		var blogId=$('#blogId').val();
		app.currentRoom.addLike(blogId);
		$("#likes").val(loadBlog(blogId).likes);
	});
	$("#dislikeButton").click(function(){
		var blogId=$('#blogId').val();
		app.currentRoom.addDislike(blogId);
		$("#dislikes").val(loadBlog(blogId).dislikes);
	});
	$("#rate").click(function(){
		var score=$('input[name=star1]:checked').val();
		if(score==null){
			alert("You must rate any score.");
			return;
		}
		app.currentRoom.rate($('#blogId').val(),$('#userName').val(),score);
	});
	$("#myPosition").click(function(){
		var loc=app.user.myLocation;
		if(loc==null){
			alert("You have to active geolocation in your browser and reload this page.");
			return;
		}
		var pos=loc.getPosition();
		if(confirm("Are you sure you want publish your position?"))
			app.currentRoom.publishMyPosition($("#userName").val(),pos.lat(),
					pos.lng(),new Date().getTime());
	});
	$("#suitcase").click(function(){
		if($("#matchingList").css("display")=="none"){
			app.currentRoom.myBlogs($("#userName").val());
			$("#matchingList").show();
		}else{
			$("#matchingList").hide();
		}
	});
	$("#doSearch").click(function(){
		if($("#txt").val()==''){
			alert("Please insert any text.");
			$("#resultList").html("");
			return;
		}			
		app.currentRoom.doSearch($("#txt").val());
		$("#resultList").show();
	});
	$(".fancybox").fancybox();
	timer=setInterval('app.currentRoom.unPublish()', 30000);
	function handleFileSelect(evt) {
		    var files = evt.target.files;
		    for (var i = 0, f; f = files[i]; i++) {
		      if (!f.type.match('image.*')) {
		        continue;
		      }
		      var reader = new FileReader();
		      reader.onload = (function(theFile) {
		        return function(e) {
		        	console.log("end");
		       		$(".hide-page-loading-msg").click();
		        };
		      })(f);
		      console.log("start");
		     $(".show-page-loading-msg").click();
		      reader.readAsDataURL(f);
		    }
	}
	document.getElementById('listFiles').addEventListener('change', handleFileSelect, false);

});
$(document).on('pageinit', '#index',function(e,data){
		$('#content').height(0.885*$(window).height());
	   	initialize();
	});
$(document).on('click','#buttonList',function(){
    app.currentRoom.goToBlog($(this).val());
});
$( document ).on( "click", ".show-page-loading-msg", function() {
    var $this = $( this ),
        theme = $this.jqmData( "theme" ) || $.mobile.loader.prototype.options.theme,
        msgText = $this.jqmData( "msgtext" ) || $.mobile.loader.prototype.options.text,
        textVisible = $this.jqmData( "textvisible" ) || $.mobile.loader.prototype.options.textVisible,
        textonly = !!$this.jqmData( "textonly" );
        html = $this.jqmData( "html" ) || "";
    $.mobile.loading( "show", {
            text: msgText,
            textVisible: textVisible,
            theme: theme,
            textonly: textonly,
            html: html
    });
})
.on( "click", ".hide-page-loading-msg", function() {
    $.mobile.loading( "hide" );
});
$(document).on("click","a.readmorebtn",function () {
    var $this = $(this);
    $this.text($this.text() == "...[+]" ? "[-]" : "...[+]").next("p.more").slideToggle("fast");
});
$(document).on("click",".response",function () {
	$("#commentIdRef").val($(this).parent().find(".commentIdRef").val());
	$("#level").val(parseInt($(this).parent().find(".level").val())+1);
	$("#commentResponse").appendTo($(this).parent());
	$("#commentResponse").show();
});
</script>
	<div data-role="page" class="jqm-demos" id="index"
		data-title="Microblogging">
		<script type="text/javascript">	
		 
		</script>
		<div data-role="header" data-position="fixed" id="header" data-ajax=false>
			<h1>Hi ${name}. Welcome to Session ${sname}</h1>
			<a href="#nav-panel" data-icon="bars" data-iconpos="notext" onclick="loadTableResume()">Menu</a>
			<a href="<c:url value="/" />" data-icon="back" id="logout"
				data-iconpos="notext">Sign out</a> 
			<a href="#add-form"	data-icon="gear" data-iconpos="notext" id="panelD"
				style="display: none;">Add</a>
		</div>
		<!-- /header -->

		<div data-role="content" class="ui-content jqm-content jqm-fullwidth"
			id="content">
			<div id="map_canvas" style="height: 100%"></div>
		</div>
		<!-- /content -->

		<div data-role="footer" data-position="fixed" id="footer">
			<h3>@Version 2.1.6</h3>
		</div>
		<!-- /footer -->

		<div data-role="panel" data-position-fixed="true" data-display="push"
			data-theme="b" id="nav-panel">

			<ul data-role="listview">
				<li data-icon="delete"><a href="#" data-rel="close" class="ui-btn ui-mini">Close
						menu</a></li>
				<li><div data-role="collapsible" data-theme="b" data-content-theme="b" data-iconpos="right" 
				data-mini="true" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" class="extend-div" id="table">
					<h4>Table Resume</h4>
					<table id="tableResume" data-role="table" class="ui-body-d ui-shadow table-stripe ui-responsive" 
					data-column-btn-theme="b" style="font-size: 12;margin-left:-4%;">
					     <thead>
					       <tr>
					         <th data-priority="1" style="color:white;">Theme</th>
					         <th data-priority="5" style="color:white;">Rating</th>
					         <th data-priority="5" style="color:white;">Visited</th>
					         <th data-priority="5" style="color:white;">Rated</th>
					       </tr>
					     </thead>
					     <tbody>				       
					     </tbody>
					   </table>
				</div></li>
				<li data-role="list-divider">Features</li>
				<li><a href="#" id="myPosition"
					class="ui-btn ui-shadow ui-btn-icon-right ui-icon-navigation ui-mini">My
						Position</a></li>
				<li><a href="#" id="suitcase"
					class="ui-btn ui-shadow ui-btn-icon-right ui-icon-user ui-mini">My
						Themes</a></li>
				<li><div id="matchingList" style="display: none;"></div></li>
				<li><div data-role="collapsible" data-theme="b" data-content-theme="b" data-mini="true" 
					data-iconpos="right" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" class="extend-div">
				    <h4>My Sessions</h4>
				 <ul style="margin-left:-20%;"><c:forEach items="${sessions}" var="session">
					<form action="map" method="post" data-ajax="false">
							<input type="hidden" name="session" value="${session.sessionID}">
							<button class="ui-btn ui-mini" onclick="$(this).parents('form').prop({'action':'map'})" type="submit">Session: ${session.name}</button>						
						</form>						
					</c:forEach></ul>
				</div></li>				
				<li data-role="list-divider">Searching</li>
				<li><fieldset data-role="controlgroup" data-type="horizontal"
						data-mini="true">
						<div>
							<input type="radio" name="radio-choice-h-6" id="searchGoogle"
								value="google" checked="checked"> <label
								for="searchGoogle">Google</label> <input type="radio"
								name="radio-choice-h-6" id="searchMicroblogging"
								value="microblogging"> <label for="searchMicroblogging">Microblogging</label>
						</div>
					</fieldset></li>
				<li><div id="searchG">
						<input type="search" name="search-1" id="search-1" value=""
							placeholder="in google">
					</div>
					<div id="searchM" style="display: none;">
						<input type="search" name="txt" id="txt" value=""
							placeholder="in microblogging">
						<div style="text-align: center;">
							<a href="#" id="doSearch"
								class="ui-btn ui-shadow ui-corner-all ui-btn-b ui-mini">Search</a>
						</div>
					</div></li>
				<li><div id="resultList" style="display: none;"></div></li>
			</ul>

		</div>
		<!-- /panel -->

		<div data-role="panel" data-position="right" data-dismissible="false"
			data-display="overlay" data-theme="a" id="add-form">
			<div style="display:none;">
			<button class="show-page-loading-msg" data-textonly="false" data-textvisible="true" data-msgtext="" data-inline="true">Icon + text</button>
			<button class="hide-page-loading-msg" data-inline="true" data-icon="delete">Hide</button>
			</div>
			<form class="userform">
				<input id="userName" type="hidden" value="${name}"> 
				<input	id="blogId" type="hidden">					
				<label for="title">Title:</label> 
				<input type="text" name="title"	id="title" data-mini="true"> 
				<label for="description">Description:</label>
				<textarea name="description" id="description" data-mini="true"></textarea>
				<div id="publishTime" style="font-size: 0.8em; text-align: center;"></div>
				<div id="mediaButton" data-role="collapsible"
					data-collapsed-icon="carat-d" data-expanded-icon="carat-u"
					data-iconpos="right" data-mini="true">
					<h3>Media</h3>
					<div id="listFiles"></div>
					<button type="button" data-icon="plus" data-iconpos="right"
						data-mini="true" id="addFile">Add</button>
				</div>
				<div id="mediaThumbnail" data-role="collapsible"
					data-collapsed-icon="carat-d" data-expanded-icon="carat-u"
					data-iconpos="right" data-mini="true">
					<h3>Media Thumbnail</h3>
					<div id="thumbnail"></div>
				</div>
				<div id="socialButton" data-role="collapsible"
					data-collapsed-icon="carat-d" data-expanded-icon="carat-u"
					data-iconpos="right" data-mini="true">
					<h3>Rate</h3><span style="float:left; font-size: 12;margin-top:7;">you:</span>
					<input name="star1" type="radio" class="star" title="1" value="1"/>
      				<input name="star1" type="radio" class="star" title="2" value="2"/>
       				<input name="star1" type="radio" class="star" title="3" value="3"/>
       				<input name="star1" type="radio" class="star" title="4" value="4"/>
       				<input name="star1" type="radio" class="star" title="5" value="5"/>
       				<input name="star1" type="radio" class="star" title="6" value="6"/>
       				<input name="star1" type="radio" class="star" title="7" value="7"/><br/>
					<a href="#" id="rate"
								class="ui-btn ui-shadow ui-corner-all ui-btn-a ui-mini">Rate it!</a>
					<div id="rating" style="display: none;"><span style="float:left; font-size: 12">avg:</span>
						<input name="star2" type="radio" class="star" title="1" value="1"/>
						<input name="star2" type="radio" class="star" title="2" value="2"/>
						<input name="star2" type="radio" class="star" title="3" value="3"/>
						<input name="star2" type="radio" class="star" title="4" value="4"/>
						<input name="star2" type="radio" class="star" title="5" value="5"/>
						<input name="star2" type="radio" class="star" title="6" value="6"/>
						<input name="star2" type="radio" class="star" title="7" value="7"/><br/>
					    <div data-role="collapsible" data-iconpos="right" data-mini="true"
					    	data-collapsed-icon="carat-d" data-expanded-icon="carat-u">
						    <h6>Details</h6>					
							<input name="detail7" type="radio" class="star" title="1" value="1"/>
							<input name="detail7" type="radio" class="star" title="2" value="2"/>
							<input name="detail7" type="radio" class="star" title="3" value="3"/>
							<input name="detail7" type="radio" class="star" title="4" value="4"/>
							<input name="detail7" type="radio" class="star" title="5" value="5"/>
							<input name="detail7" type="radio" class="star" title="6" value="6"/>
							<input name="detail7" type="radio" class="star" title="7" value="7" checked="checked"/><span id="d7" class="float-right"></span><br/>
							<input name="detail6" type="radio" class="star" title="1" value="1"/>
							<input name="detail6" type="radio" class="star" title="2" value="2"/>
							<input name="detail6" type="radio" class="star" title="3" value="3"/>
							<input name="detail6" type="radio" class="star" title="4" value="4"/>
							<input name="detail6" type="radio" class="star" title="5" value="5"/>
							<input name="detail6" type="radio" class="star" title="6" value="6" checked="checked"/><span id="d6" class="float-right"></span><br/>
							<input name="detail5" type="radio" class="star" title="1" value="1"/>
							<input name="detail5" type="radio" class="star" title="2" value="2"/>
							<input name="detail5" type="radio" class="star" title="3" value="3"/>
							<input name="detail5" type="radio" class="star" title="4" value="4"/> 
							<input name="detail5" type="radio" class="star" title="5" value="5" checked="checked"/><span id="d5" class="float-right"></span><br/>
							<input name="detail4" type="radio" class="star" title="1" value="1"/>
							<input name="detail4" type="radio" class="star" title="2" value="2"/>
							<input name="detail4" type="radio" class="star" title="3" value="3"/>
							<input name="detail4" type="radio" class="star" title="4" value="4" checked="checked"/><span id="d4" class="float-right"></span><br/>
							<input name="detail3" type="radio" class="star" title="1" value="1"/>
							<input name="detail3" type="radio" class="star" title="2" value="2"/>
							<input name="detail3" type="radio" class="star" title="3" value="3" checked="checked"/><span id="d3" class="float-right"></span><br/>
							<input name="detail2" type="radio" class="star" title="1" value="1"/>
							<input name="detail2" type="radio" class="star" title="2" value="2" checked="checked"/><span id="d2" class="float-right"></span><br/>
							<input name="detail1" type="radio" class="star" title="1" value="1" checked="checked"/><span id="d1" class="float-right"></span><br/>
						</div>
					</div>
				</div>
				<div id="commentResponse" class="ui-corner-all custom-corners" style="display:none;">
						<div class="ui-body ui-body-a strech" style="font-size: 0.7em;">
							<textarea name="commentR" id="commentR" data-clear-btn="true"
								data-mini="true" placeholder="Add new comment"></textarea>
							<a href="#" id="addCommentResponse"
								class="ui-btn ui-shadow ui-corner-all ui-btn-a ui-mini">Add</a>
						</div><br/>
						<input id="commentIdRef" type="hidden"> 
						<input id="level" type="hidden">
				</div>				
				<div id="comments" data-role="collapsible"
					data-collapsed-icon="carat-d" data-expanded-icon="carat-u"
					data-iconpos="right" data-mini="true">
					<h3>Comments</h3>					
					<div id="commentDiv" class="ui-corner-all custom-corners">
						<div class="ui-body ui-body-a strech" style="font-size: 0.7em;">
							<textarea name="comment" id="comment" data-clear-btn="true"
								data-mini="true" placeholder="Add new comment"></textarea>
							<a href="#" id="addComment"
								class="ui-btn ui-shadow ui-corner-all ui-btn-a ui-mini">Add</a>
						</div><br/>
					</div>
					<div id="listComments"></div>
				</div>
				<div id="actionButton" class="ui-grid-a">
					<div class="ui-block-a">
						<a href="#" id="discard" data-mini="true"
							class="ui-btn ui-shadow ui-corner-all ui-btn-b ui-mini">Discard</a>
					</div>
					<div class="ui-block-b">
						<a href="#" id="publish" data-mini="true"
							class="ui-btn ui-shadow ui-corner-all ui-btn-a ui-mini">Publish</a>
					</div>
				</div>
			</form>

		</div>
		<!-- /panel -->
	</div>
	<!-- /page -->
</body>
</html>
